<template>
  <el-drawer v-model="drawer" :close-on-click-modal="false" :direction="direction">
    <template #header>
      <h4>添加酒店</h4>
    </template>
    <template #default>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" label-position="top">
        <el-form-item label="酒店名" prop="hotelName">
          <el-input v-model="ruleForm.hotelName" placeholder="请输入酒店名"/>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-input v-model="ruleForm.country" placeholder="请输入国家"/>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="ruleForm.city" placeholder="请输入城市"/>
        </el-form-item>
        <el-form-item label="图片URL" prop="imageUrl">
          <el-input v-model="ruleForm.imageUrl" placeholder="请输入图片URL"/>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model.number="ruleForm.longitude" placeholder="请输入经度"/>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model.number="ruleForm.latitude" placeholder="请输入纬度"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createHotel } from '@/api/hotel'

const emit = defineEmits(['refresh'])

interface RuleForm {
  hotelName: string
  country: string
  city: string
  imageUrl: string
  longitude: number
  latitude: number
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  hotelName: '',
  country: '',
  city: '',
  imageUrl: '',
  longitude: null,
  latitude: null
})

const drawer = ref(false)
const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')

const rules = reactive<FormRules<RuleForm>>({
  hotelName: [{ required: true, message: '请输入酒店名', trigger: 'blur' }],
  country: [{ required: true, message: '请输入国家', trigger: 'blur' }],
  city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
  imageUrl: [{ required: false, message: '请输入图片URL', trigger: 'blur' }]
})

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 确保数值字段是正确的格式
      const formData = {
        ...ruleForm,
        // 确保数值类型字段是数字
        longitude: Number(ruleForm.longitude),
        latitude: Number(ruleForm.latitude)
      };
      
      console.log('提交新增酒店数据:', formData);
      
      createHotel(formData).then(res => {
        console.log('新增酒店响应:', res);
        
        const result = res.data;
        if (result && result.code === 200) {
          ElMessage.success('添加成功')
          handleClose()
          emit('refresh')
        } else {
          ElMessage.error(result?.msg || '添加失败')
        }
      }).catch(error => {
        console.error('添加酒店错误:', error);
        ElMessage.error('网络错误，添加酒店失败');
      });
    }
  })
}
const handleClose = () => {
  drawer.value = false
}
const open = () => {
  drawer.value = true
}
defineExpose({ open })
</script>
